<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 适配手机端 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件实例三大属性 props</title>
</head>


<!-- react核心库 -->
<script src="../React-js/react.development.js"></script>
<!-- 操作DOM支持库 -->
<script src="../React-js/react-dom.development.js"></script>
<!-- babel转换库  jsx-js -->
<script src="../React-js/babel.min.js"></script>


<body>

    <div id="test"></div>

    <script type="text/babel">
        class RefDemo extends React.Component {
            state = { inputValue: "更新前的值" }
            render() {
                const { inputValue } = this.state;
                return (
                    
                    <div>
                        { /* 其实就是内联函数的形式   这会导致dom 刷新 重新执行函数*/}
                        {/* <input style={{ marginRight:'10px' }} ref={(currentNode) => this.handelRef(currentNode)} type="text" /> */}
                        
                        { /* 不会重新执行函数*/}
                        <input style={{ marginRight:'10px' }} ref={ this.handelRef } type="text" />
                        <button onClick={this.showName}>执行</button>
                        <br/>
                        <br/>
                        <br/>
                        <span>{ inputValue }</span>
                        <button style={{ marginLeft:'30px' }} onClick={this.updateDom }>更新DOM</button>

                    </div>
                )

            }
            handelRef = (node)=> {
                console.log('当前执行了ref回调函数',node);
                this.input1 = node
            }
            updateDom = ()=>{
               this.setState( { inputValue: '更新后的值' } )
            }
            showName = () => {
                const { input1 } = this;
                const value1 = input1.value
                alert(`输出值为 - ${value1}`)
            }
        }

        ReactDOM.render(<RefDemo />, document.getElementById('test'))

    </script>
</body>

</html>